<template>
  <el-row class="tac">
    <el-col :span="12" class="col">
      <el-menu default-active="0a" background-color="#fff0" class="el-menu-vertical-demo">
        <el-submenu index="20" v-for="(item, index) in navs" :key="index" v-if="index == 0">
          <template slot="title">
            <img class="icon" :src="item.icon" alt="">
            <span>{{ item.title }}</span>
          </template>
          <el-menu-item :index="indexx + 'a'" v-for="(obj, indexx) in item.txts" :key="indexx"
            @click="menuItem(indexx)">{{
              obj }}</el-menu-item>
        </el-submenu>
        <el-menu-item @click="adminGo(item)" :index="index + 'c'" v-for="(item, index) in navs" :key="index" v-if="index != 0">
          <img class="icon" :src="item.icon" alt="">
          <span slot="title">{{ item.title }}</span>
        </el-menu-item>
      </el-menu>
      <div  class="quit" @click="toLogin">
        <img src="../../assets/退出.svg" alt="">
        <span>退出</span>
      </div>
    </el-col>

  </el-row>
</template>

<script>

export default {
  name: 'Login',
  data() {
    return {
      navs: [
        {
          icon: '/nav/1.jpg',
          title: '用户管理',
          txts: ['管理员管理', '用户信息管理'],
          path: ""
        },
        {
          icon: '/nav/2.jpg',
          title: '门店',
          path: "/admin/mendian"
        },
        {
          icon: '/nav/3.jpg',
          title: '分类管理',
          path: "/admin/fenlei"
        },
        {
          icon: '/nav/4.jpg',
          title: '商品管理',
          path: "/admin/goods"
        },
        {
          icon: '/nav/5.jpg',
          title: '订单管理',
          path: "/admin/orders"
        },
        {
          icon: '/nav/6.jpg',
          title: '销售管理',
          path: "/admin/staticsproject"
        },
        {
          icon: '/nav/7.jpg',
          title: '意见反馈',
          path: "/admin/setup"
        },
        {
          icon: '/nav/8.jpg',
          title: '评价管理',
          path: "/admin/business"
        }
      ],
      now: 0
    }
  },
  mounted(){
    this.index();
  },
  methods: {
    menuItem(index) {
      if (index == this.now) {
        return
      } else {
        this.now = index
        if (index == 0) {
          this.$router.push({ name: 'adminUser' })
        } else {
          this.$router.push({ name: 'User' })
        }
      }
    },
    adminGo(item) {
      this.$router.push(item.path).catch(() => { })
    },
    toLogin(){
        history.go(0)
    },
    index(){
      let user = sessionStorage.getItem("user");
      if (user != null) {
        // 将JSON格式的对象解析为js对象，currentUser为一个js对象
        this.currentUser = JSON.parse(user);
        console.log(JSON.parse(user))
        console.log(user)
      }
    }
  },
  
}
</script>

<style scoped>
.tac {
  width: 300px;
  height: calc(100vh - 80px);
  background-image: url(/public/nav/bgi.jpg);
  background-size: 100% 100%;
}

.el-col-12 {
  width: 100% !important;
}

.icon {
  width: 20px;
  object-fit: cover;
  margin-right: 10px;
}
.quit{
  width: 100%;
  height: 50px;
  padding-left: 40px;
  display: flex;
  align-items: center;
}
.quit >img{
  width: 25px;
  height: 25px;
}
.quit>span{
  color: #666;
}
</style>

